<template>
    <div>
      <div class="top">
        <el-row style="margin-left: 40px;margin-top: 10px">
          <el-col :span="1">
            <img src="../imgs/view.png"/>
          </el-col>
          <el-col :span="12" style="font-size: 24px">
            <el-input v-model="kehuName" readonly="readonly" class="kh"></el-input>
          </el-col>
        </el-row>
        <el-form class="top2" ref="customerLinkman" :rules="rules" label-width="120px" :model="customerLinkman">
          <el-row style="margin-top: 10px;">
            <el-col :span="10" class="font">
              <el-form-item label="客户名称:" prop="cusName">
                <el-input v-model="customerLinkman.cusName" @blur="update('customerLinkman')" style="width:210px">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="font">
              <el-form-item label="客户地址:" prop="cusAddressArea" style="margin-left:30px">
                <v-distpicker :province="customerLinkman.cusAddressProvince" @province="cusChangeProvince"
                              :city="customerLinkman.cusAddressCity" @city="cusChangeCity"
                              :area="customerLinkman.cusAddressArea" @area="cusChangeArea"
                              @selected="sel" v-if="vidter" class="distpicker"></v-distpicker>
                <el-input v-if="is" @click.native="vidter=true,is=false" v-model="address" style="width: 310px"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label="创建日期:" prop="customTime">
                <span style="margin-left: 15px">{{customerLinkman.customTime | formatDate}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="font" style="margin-left: 32px">
              <el-form-item label="客户备注:" prop="cusRemark">
                <el-input @blur="update('customerLinkman')" v-model="customerLinkman.cusRemark" style="width: 210px;"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10" class="font">
              <el-form-item label="客户类型:" prop="typeId.typeName">
                <el-input v-model="customerLinkman.typeId.typeName" style="width: 210px;" readonly="readonly" class="read"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="font" style="margin-left: 32px">
              <el-form-item label="客户来源:" prop="cusSource">
                <el-input v-model="customerLinkman.cusSource" style="width: 210px;" readonly="readonly" class="read"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10" class="font">
              <el-form-item label="客户负责人:" prop="customEmpid.empName">
                <el-input v-model="customerLinkman.customEmpid.empName" readonly="readonly" style="width: 210px;" class="read"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="font" style="margin-left: 32px">
              <el-form-item label="客户联系人:" prop="culinkmenByCustomId[0].cupName">
                <el-input @blur="update('customerLinkman')" v-model="customerLinkman.culinkmenByCustomId[0].cupName" style="width: 210px;"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row style="margin-bottom: 20px">
            <el-col :span="10" class="font">
              <el-form-item label="联系电话:" prop="culinkmenByCustomId[0].cupPhone">
                <el-input @blur="update('customerLinkman')" v-model="customerLinkman.culinkmenByCustomId[0].cupPhone" oninput="value=value.replace(/[^\d.]/g,'')" style="width: 210px;"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="font" style="margin-left: 32px">
              <el-form-item label="邮箱:" prop="culinkmenByCustomId[0].cupEmail">
                <el-input @blur="update('customerLinkman')" v-model="customerLinkman.culinkmenByCustomId[0].cupEmail" oninput="value=value.replace(/[\u4E00-\u9FA5]/g,'')" style="width: 210px;"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>

      <el-row style="border: 1px solid #ccc">
        <!--        客户地址管理-->
        <el-collapse v-model="activeNames">
          <el-collapse-item title="收货地址管理" name="1">
            <el-row>
              <el-button type="primary" @click="inAddress=true" size="small" style="margin-left: 90%;margin-bottom: 10px">去添加</el-button>
            </el-row>
            <el-row>
              <el-col v-if="addressList == null || addressList == ''" style="text-align: center">
                <el-button type="text" @click="inAddress=true">暂无地址，点击添加吧！</el-button>
              </el-col>
              <el-col :span="7" :offset="1" v-for="(cons,index) in addressList" :key="index" style="margin-bottom: 10px;margin-left: 40px">
                <el-card :body-style="{ padding: '4px' }">
                  <div @click="cardevent(cons)" style="cursor:pointer">
                    <div style="padding: 14px;">
                      <span class="el-icon-close" @click.stop="delAddress(cons)" style="margin-left: 310px"></span>
                      <el-row>
                        <el-col>
                          <span style="font-size: 20px">{{cons.consigneeName}}</span> {{cons.rcPhone}}  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{cons.rcCreationTime | formatDate}}
                        </el-col>
                      </el-row>
                      <div style="border: 1px solid #42b983 ;width: 95%;margin-top: 10px;margin-bottom: 10px"></div>
                      <el-row>
                        <el-col>
                          <span style="color: #20a0ff">{{cons.rcAddressProvince}} {{cons.rcAddressCity}} {{cons.rcAddressArea}} {{cons.rcAddressDetailed}}</span>
                        </el-col>
                      </el-row>
                    </div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </el-collapse-item>
        </el-collapse>
      </el-row>
<!--      添加、修改地址弹框-->
      <el-dialog title="地址信息" @close="addressQuXiao" :visible.sync="inAddress" width="38%">
        <el-form :model="addressForm" ref="addressForm" :rules="rules2" style="margin-left: 44px" label-width="90px">
            <el-form-item label="收货姓名:" prop="consigneeName">
              <el-input v-model="addressForm.consigneeName" style="width:250px;"></el-input>
            </el-form-item>
            <el-form-item label="收货电话:"  prop="rcPhone">
              <el-input v-model="addressForm.rcPhone" oninput="value=value.replace(/[^\d.]/g,'')" style="width:250px;"></el-input>
            </el-form-item>
            <el-form-item label="收货地址:" prop="rcAddressArea">
              <v-distpicker  :province="addressForm.rcAddressProvince" @province="ChangeProvince"
                             :city="addressForm.rcAddressCity" @city="ChangeCity"
                             :area="addressForm.rcAddressArea" @area="ChangeArea"
                             class="distpicker-address"></v-distpicker>
            </el-form-item>
            <el-form-item label="详细地址:" prop="rcAddressDetailed">
              <el-input v-model="addressForm.rcAddressDetailed" style="width:250px;"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addressQuXiao">取 消</el-button>
          <el-button type="primary" @click="saveAddress('addressForm')">确 定</el-button>
        </span>
      </el-dialog>

      <!--      左侧-->
      <el-row>
        <el-col :span="5" class="left">
          <!--          联系人-->
          <div v-if="linkmanList != null" style="width: 133%;background: white;margin-bottom:5px;border: 1px solid #ccc;">
            <el-row style="margin-left: 15px">
              <el-col :span="3">
                <img src="../imgs/lxr.png" style="width: 25px;height: 25px"/>
              </el-col>
              <el-col :span="18">
                联系人
              </el-col>
            </el-row>
            <el-row v-for="linkman in linkmanList" :key="linkman.cupId" style="width: 100%;min-height:180px;border-top: 1px solid #ccc;text-align: center">
              <div>
                <el-row>
                  <el-col :span="4" style="margin-left: 10px">
                    <i class="el-icon-s-custom" style="font-size: 40px"></i>
  <!--                  姓名-->
                    <span>{{linkman.cupName}}</span>
                  </el-col>
                  <el-col :span="18">
                    <div class="lian">
                      <el-row style="margin-bottom: 20px;font-size:14px">
                          <p>手机：{{linkman.cupPhone}}</p>
                          <p>QQ：{{linkman.cupQq}}</p>
                          <p>邮箱：{{linkman.cupEmail}}</p>
                          <p>居住地址：{{linkman.cupAddressProvince}} {{linkmanList.cupAddressCity}} {{linkmanList.cupAddressArea}}</p>
                          <p>详细地址：{{linkman.cupXxaddress}}</p>
                      </el-row>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-row>
          </div>
        </el-col>
<!--      右侧跟单时间线-->
        <el-col :span="17" class="right" style="margin-left: 8%;height: 800px;overflow-y: scroll">
          <p style="text-align: center;margin-top: 20px;margin-bottom: 10px"><img src="../imgs/time.png" style="width: 18px;height: 15px"/>&nbsp;跟单时间线</p>
          <el-tabs v-model="activeTab" class="tabs" stretch>
<!--            全部-->
            <el-tab-pane name="one">
              <el-row slot="label"><img src="../imgs/all.png" style="width: 15px;height: 15px"/>&nbsp;全部</el-row>
              <el-timeline style="margin-top:30px;margin-left: 60px">
                <el-timeline-item v-for="(ve, index) in view" :key="index" :timestamp="ve.createTime" placement="top">
                  <el-card>
                    <div v-for="vi in ve.timelines" :key="vi.timelineId">
                      <P style="margin-bottom: 10px">{{vi.timelineTitle}}  {{vi.timelineContent}}&nbsp;&nbsp;
                        <span v-if="vi.tainId!=null" style="color: #4FA1E4">
                          <span v-if="vi.tainId==2">待审批</span>
                          <span v-if="vi.tainId==3">审批中</span>
                          <span v-if="vi.tainId==4">已同意</span>
                          <span v-if="vi.tainId==5">已否决</span>
                        </span>
                        <span v-if="vi.timelintRouter!=null">
                          <router-link :to="{path:'/'+vi.timelintRouter+''}"><i class="el-icon-right"></i></router-link></span></p>
                    </div>
                  </el-card>
                </el-timeline-item>
              </el-timeline>
            </el-tab-pane>
<!--            商机-->
            <el-tab-pane name="two">
              <el-row slot="label"><img src="../imgs/xsjh.png" style="width: 15px;height: 15px"/>&nbsp;商机</el-row>
              <el-timeline class="busi">
<!--                <span v-if="businessList == []">暂无数据</span>-->
                <el-timeline-item :timestamp="business.businessTime | formatDate" placement="top" v-for="(business,index) in businessList" :key="index">
                  <el-card>
                    <h4> <img :src="business.budinessEmpid.empImgpath"
                              style="border-radius:50%;width:45px;height:45px;" />
                      <span style="position: relative;top: -5px;">
                        {{business.budinessEmpid.empName}}新增了一个商机：
                        <span @click="tiaoBusinessDetails(business.businesId)" style="cursor: pointer;color: #4FA1E4">{{business.businessName}}</span>
                      </span>
                    </h4>
                    <p>预期金额：{{business.expectedAmount}}</p>
                    <p>商机进度：{{business.speedInfoBySpeedId.speedContext}}</p>
                  </el-card>
                </el-timeline-item>
              </el-timeline>
            </el-tab-pane>
<!--            交付记录-->
            <el-tab-pane name="three">
              <el-row slot="label"><img src="../imgs/jfjl.png" style="width: 15px;height: 15px"/>&nbsp;交付记录</el-row>
              <el-timeline class="busi">
                <!--                <span v-if="businessList == []">暂无数据</span>-->
                <el-timeline-item :timestamp="delivery.deNewtime | formatDate" placement="top" v-for="(delivery,index) in deliveryList" :key="index">
                  <el-card>
                    <el-row style="font-weight: bold">
                      <el-col :span="6">交付产品</el-col>
                      <el-col :span="6">交付数量</el-col>
                      <el-col :span="6">交付金额</el-col>
                      <el-col :span="6">操作人</el-col>
                    </el-row>
                    <el-row style="margin-top: 15px">
                      <el-col :span="6">{{delivery.prName}}</el-col>
                      <el-col :span="6">{{delivery.detaNumber}}</el-col>
                      <el-col :span="6">{{delivery.deAmount}}</el-col>
                      <el-col :span="6">{{delivery.empName}}</el-col>
                    </el-row>
                  </el-card>
                </el-timeline-item>
              </el-timeline>
            </el-tab-pane>
            <!--            合同-->
            <el-tab-pane name="four">
              <el-row slot="label"><img src="../imgs/dd2.png" style="width: 15px;height: 15px"/>&nbsp;合同</el-row>
              <el-timeline class="busi">
                <el-timeline-item :timestamp="contract.signingTime | formatDate" placement="top" v-for="contract in contractList" :key="contract.contractId">
                  <el-card>
                    <h4> <img :src="contract.empId8.empImgpath"
                              style="border-radius:50%;width:45px;height:45px;" />
                      <span style="position: relative;top: -5px;">
                         {{contract.empId8.empName}}新增了一个合同：
                         <span @click="tiaoContractDetails(contract.contractId)" style="cursor: pointer;color: #4FA1E4">{{contract.contractName}}</span>
                      </span>
                    </h4>
                    <p>签约人：{{contract.customerName}}</p>
                  </el-card>
                </el-timeline-item>
              </el-timeline>
            </el-tab-pane>
<!--                        订单-->
            <el-tab-pane name="five">
              <el-row slot="label"><img src="../imgs/dd2.png" style="width: 15px;height: 15px"/>&nbsp;订单</el-row>
              <el-timeline class="busi">
                <el-timeline-item :timestamp="order.orderTime | formatDate" placement="top" v-for="order in orderList" :key="order.orderId">
                  <el-card>
                    <h4> <img :src="order.empId.empImgpath"
                              style="border-radius:50%;width:45px;height:45px;" />
                      <span style="position: relative;top: -5px;">
                         {{order.empId.empName}}新增了一个订单：
                         <span @click="tiaoOrderDetails(order.orderId)" style="cursor: pointer;color: #4FA1E4">{{order.orderName}}</span>
                      </span>
                    </h4>
                    <p>签约人：{{order.customerName}}</p>
                  </el-card>
                </el-timeline-item>
              </el-timeline>
            </el-tab-pane>
<!--            回款-->
            <el-tab-pane name="six">
              <el-row slot="label"><img src="../imgs/hk.png" style="width: 15px;height: 15px"/>&nbsp;回款</el-row>
              <el-timeline class="busi">
                <el-timeline-item :timestamp="ctschems.orderTime | formatDate" placement="top" v-for="(ctschems,index) in ctschemsList" :key="index">
                  <el-card>
                    <el-row style="margin-bottom: 10px">
                      对应订单：<span style="font-weight: bold">{{ctschems.orderName}}</span>
                    </el-row>
                    <el-row style="font-weight: bold">
                      <el-col :span="6">回款编号</el-col>
                      <el-col :span="6">回款金额</el-col>
                      <el-col :span="6">订单总金额</el-col>
                      <el-col :span="6">计划完成时间</el-col>
                    </el-row>
                    <el-row v-for="vts in ctschems.ctschemesByOrderId" :key="vts.ctId" style="margin-top: 15px">
                      <el-col :span="6">{{vts.ctId}}</el-col>
                      <el-col :span="6">{{vts.ctAmount | amountEvent}}</el-col>
                      <el-col :span="6">{{ctschems.orderTotal | amountEvent}}</el-col>
                      <el-col :span="6">{{ctschems.deliveryTime}}</el-col>
                    </el-row>
                    <el-row style="margin-left: 630px">
                      <h4 v-if="ctschems.receivableOrder==ctschems.orderTotal">回款完成</h4>
                    </el-row>
                  </el-card>
                </el-timeline-item>
              </el-timeline>
            </el-tab-pane>
<!--            维修-->
            <el-tab-pane name="eight">
              <el-row slot="label"><img src="../imgs/wx.png" style="width: 15px;height: 15px"/>&nbsp;维修</el-row>
              <el-timeline class="busi">
                <el-timeline-item :timestamp="maintain.tainsDate | formatDate" placement="top" v-for="(maintain,index) in maintainList" :key="index">
                  <el-card>
                    <h4>
                      <span style="position: relative;top: -5px;">
                         新增了维修单：
                         <span @click="tiaoMaintainDetails(maintain.tainId)" style="cursor: pointer;color: #4FA1E4">{{maintain.tainOrder}}</span>
                      </span>
                    </h4>
                    <p style="margin-left: 0px">操作人：{{maintain.tainRece}}</p>
                  </el-card>
                </el-timeline-item>
              </el-timeline>
            </el-tab-pane>
<!--            关怀-->
            <el-tab-pane name="nine">
              <el-row slot="label"><img src="../imgs/gh.png" style="width: 15px;height: 15px"/>&nbsp;客户关怀</el-row>
              <el-timeline class="busi">
                <el-timeline-item :timestamp="care.careDate | formatDate" placement="top" v-for="(care,index) in customerCareList" :key="index">
                  <el-card>
                    <h4> <img :src="care.empByEmployeesId.empImgpath"
                              style="border-radius:50%;width:45px;height:45px;" />
                      <span style="position: relative;top: -5px;">
                         {{care.empByEmployeesId.empName}}送出了一个： {{care.careType}}
                      </span>
                    </h4>
                    <p>{{care.careSubject}}</p>
                  </el-card>
                </el-timeline-item>
              </el-timeline>
            </el-tab-pane>
          </el-tabs>
        </el-col>
      </el-row>
    </div>
</template>

<script>
  import {formatTimeToStr} from '@/assets/format'
import VDistpicker from 'v-distpicker'
  import {amountToStr} from '../assets/format'
export default {
  name: 'CustomerView',
  components: { VDistpicker },
  data () {
    // 查询客户名是否存在
    var checkedCusName = (rule, value, callback) => {
      if(this.updateCusName == value){
        // 如果修改客户信息时没有修改客户名称，就不做校验
        callback();
      }else{
        this.$axios.get("http://localhost:8088/vue/select-cusname",{params:{cusName:value}})
          .then(v=>{
            console.log(v.data)
            if(v.data != null && v.data != ""){
              callback(new Error("该客户名已存在，请重新输入"))
            }else{
              callback()
            }
          }).catch()
      }
    };
    // 查询联系人表联系电话是否重复
    var checkedCupPhone = (rule, value, callback) => {
      if(this.updateCupPhone == value){
        // 如果修改联系人信息时没有修改联系人电话，就不做校验
        callback();
      }else{
        this.$axios.get("http://localhost:8088/vue/select-cupphone",{params:{cupPhone:value}})
          .then(v=>{
            console.log(v.data)
            if(v.data != null && v.data != ""){
              callback(new Error("联系电话重复！请重新输入"))
            }else{
              callback()
            }
          }).catch()
      }
    };
    return {
      updateCusName:'',//修改客户时的客户名称
      updateCupPhone:'',//修改客户联系人时的联系人电话
      rules:{
        cusName:[
          {required: true, message: '客户名称不能为空!', trigger: 'change' },
          {validator:checkedCusName,trigger: 'change' }
        ],
        'culinkmenByCustomId[0].cupName':[
          {required:true,message:'请输入联系人姓名',trigger:'change'}
        ],
        'culinkmenByCustomId[0].cupPhone':[
          {required:true,message:'请输入联系电话',trigger:'change'},
          { pattern: /^1[3456789]\d{9}$/,message: '请输入正确的联系电话', trigger:'change'},
          {validator:checkedCupPhone,trigger: 'change'}
        ],
        'culinkmenByCustomId[0].cupEmail':[
          { pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,message: '请输入正确的邮箱', trigger:'change'}
        ],
      },
      // 收货地址校验
      rules2:{
        consigneeName:[
          {required: true, message: '收货人不能为空!', trigger: 'change' },
        ],
        rcPhone:[
          {required: true, message: '收货电话不能为空!', trigger: 'change' },
          { pattern: /^1[3456789]\d{9}$/,message: '请输入正确的收货电话', trigger:'change'},
        ],
        rcAddressArea:[
          {required: true, message: '收货地址不能为空!', trigger: 'change' },
        ],
        rcAddressDetailed:[
          {required: true, message: '收货详细地址不能为空!', trigger: 'change' },
        ]
      },
      activeNames: ['2'],//折叠选项
      inAddress:false,//添加地址弹框
      activeTab:'one',//tabs默认为第一个子页
      labelPosition: 'right',//表单右对齐
      addressForm:{},//地址表单
      addressList:[],//地址
      activities: [{ // 时间线
        content: '活动按期开始',
        timestamp: '2018-04-15'
      }, {
        content: '通过审核',
        timestamp: '2018-04-13'
      }, {
        content: '创建成功',
        timestamp: '2018-04-11'
      }],
      is:true,//地址输入框影藏
      vidter:false,//地址组件影藏
      address:' ',//地址输入框
      kehuName: '',
      customId:'',//客户id
      customerLinkman:{},//客户、联系人
      businessList:[],//商机
      linkmanList:[],//首要联系人
      contractList:[],//合同
      orderList:[],//订单
      deliveryList: [],//交付记录
      customerCareList:[],//关怀
      maintainList:[],//维修
      ctschemsList:[],//回款
      view:[],//全部客户视图
    }
  },
  created () {
    this.openFullScreen2();
    if(this.$route.query.customId != null && this.$route.query.customId != ""){
      this.customId=this.$route.query.customId
      this.initView(this.customId)
      this.initCustomerLinkman(this.customId)
      this.initAddress(this.customId)
      this.initBusiness(this.customId)
      this.initLinkman(this.customId)
      this.initContract(this.customId)
      this.initOrderInfo(this.customId)
      this.initCtschems(this.customId)
      this.initCustomerCare(this.customId)
      this.initDelivery(this.customId)
      this.initMaintain(this.customId)
      this.address=this.customerLinkman.cusAddressProvince + this.customerLinkman.cusAddressCity + this.customerLinkman.cusAddressArea;
    }
    // 方便校验
    this.updateCusName=this.customerLinkman.cusName
    this.updateCupPhone=this.customerLinkman.culinkmenByCustomId[0].cupPhone
  },
  methods: {
    openFullScreen2() {
      const loading = this.$loading({
        lock: true,
        text: '加载中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      setTimeout(() => {
        loading.close();
      }, 1000);
    },
    // 全部客户视图
    initView(customId){
      this.$axios.get("http://localhost:8088/vue/view",{params:{customId:customId}})
      .then(v=>{
        this.view=v.data
      }).catch()
    },
    // 根据客户ID查询地址
    initAddress(customId){
      this.$axios.get("http://localhost:8088/vue/kehu-address",{params:{cusId:customId}})
        .then(v=>{
          this.addressList=v.data;
        })
        .catch()
    },
    saveAddress(formName){//确定新增地址按钮
      this.$refs[formName].validate((valid) => {
          if (valid) {//如果通过验证
              this.addressForm.cusId=this.customId
              console.log(this.addressForm)
              var receiving=JSON.stringify({receivings:this.addressForm})
              this.$axios.post("http://localhost:8088/vue/add-address",this.qs.stringify({receiving:receiving}))
              .then(()=>{
                if(this.addressForm.rcId != "" && this.addressForm.rcId != null && this.addressForm.rcId != 0){
                  this.$message.success('编辑成功')
                }else{
                  this.$message.success('新增成功')
                }
                this.clearForm()
                this.inAddress=false
                this.initAddress(this.customId)
              })
              .catch()
          } else {
            console.log('error submit!!');
            return false;
          }
      });
    },
    addressQuXiao(){
      this.inAddress = false;
      this.addressForm={}
    },
    cardevent(row){//编辑地址
      // 将对象转为json再转为对象
      this.addressForm=JSON.parse(JSON.stringify(row));
      this.inAddress=true
    },
    delAddress(row){
      this.$confirm('此操作将永久删除该地址, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var receiving=JSON.stringify({receivings:row})
        this.$axios.post("http://localhost:8088/vue/del-address",this.qs.stringify({receiving:receiving}))
          .then(()=>{
            this.$message.success("删除成功")
            this.initAddress(this.customId)
          })
          .catch()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    ChangeProvince(v){
      this.addressForm.rcAddressProvince=v.value;
    },
    ChangeCity(v){
      this.addressForm.rcAddressCity=v.value;
    },
    ChangeArea(v){
      this.addressForm.rcAddressArea=v.value;
    },
    clearForm(){
      this.addressForm={
        rcId:'',
        consigneeName:'',//收货人姓名
        rcPhone:'',//电话
        rcAddressProvince:'',
        rcAddressCity:'',
        rcAddressArea:'',
        rcAddressDetailed:''
      }
    },
    // 根据客户id查询客户、联系人
    initCustomerLinkman(customId){
      this.$axios.get("http://localhost:8088/vue/customer-linkman",{params:{customId:customId}})
      .then(v=>{
        console.log("aaa"+v.data.cusName)
        this.customerLinkman=v.data
        this.kehuName=this.customerLinkman.cusName
        this.address=this.customerLinkman.cusAddressProvince + this.customerLinkman.cusAddressCity + this.customerLinkman.cusAddressArea
        // 方便校验
        this.updateCusName=this.customerLinkman.cusName
        this.updateCupPhone=this.customerLinkman.culinkmenByCustomId[0].cupPhone
      })
      .catch()
    },
    // 根据客户id查询客户商机
    initBusiness(customId){
      this.$axios.get("http://localhost:8088/vue/select-business",{params:{customId:customId}})
        .then(v=>{
          this.businessList=v.data
          console.log(this.businessList)
        })
        .catch()
    },
    // 根据客户id查询首要联系人
    initLinkman(customId){
      this.$axios.get("http://localhost:8088/vue/select-linkman",{params:{customId:customId}})
      .then(v=>{
        this.linkmanList=v.data
      })
      .catch()
    },
    // 根据客户id查询客户合同
    initContract(customId){
      this.$axios.get("http://localhost:8088/vue/select-contract",{params:{customId:customId}})
        .then(v=>{
          this.contractList=v.data
          console.log(this.contractList)
        }).catch()
    },
    // 根据客户id查询客户订单
    initOrderInfo(customId){
      this.$axios.get("http://localhost:8088/vue/select-orderinfo",{params:{customId:customId}})
      .then(v=>{
        this.orderList=v.data
      }).catch()
    },
    // 根据客户ID查询回款
    initCtschems(customId){
      this.$axios.get("http://localhost:8088/vue/select-ctschems",{params:{customId:customId}})
      .then(v=>{
        this.ctschemsList=v.data
      }).catch()
    },
    // 根据客户ID查询交付记录
    initDelivery(customId){
      this.$axios.get("http://localhost:8088/vue/select-deliverydetails",{params:{customId:customId}})
      .then(v=>{
        this.deliveryList=v.data
      }).catch()
    },
    // 根据客户id查询客户关怀
    initCustomerCare(customId){
      this.$axios.get("http://localhost:8088/vue/select-customer-care",{params:{customId:customId}})
      .then(v=>{
        this.customerCareList=v.data
      }).catch()
    },
    //根据客户ID查询维修
    initMaintain(customId){
      this.$axios.get("http://localhost:8088/vue/select-maintain",{params:{customId:customId}})
      .then(v=>{
        this.maintainList=v.data
      }).catch()
    },
    khName () {//客户名失去焦点
      this.kehuName = this.customerLinkman.cusName
    },
    update(formName){
      this.$refs[formName].validate((valid) => {
          if (valid) {//如果通过验证
            this.kehuName = this.customerLinkman.cusName
            this.$axios.post("http://localhost:8088/vue/save-customer",{
              customId:this.customerLinkman.customId,
              cusName:this.customerLinkman.cusName,
              cusRemark:this.customerLinkman.cusRemark,
              cusAddressProvince:this.customerLinkman.cusAddressProvince,
              cusAddressCity:this.customerLinkman.cusAddressCity,
              cusAddressArea:this.customerLinkman.cusAddressArea,
              customEmpid:this.customerLinkman.customEmpid,//员工对象
              typeId:this.customerLinkman.typeId,//客户类型对象
              culinkmenByCustomId:this.customerLinkman.culinkmenByCustomId,//联系人对象
            })
            .then(()=>{
              this.$message.success("保存成功")
            })
            .catch()
          }else{
            this.$message.error("信息有误！请重新输入后重试")
          }
      });
    },
    cusChangeProvince(a){
      this.customerLinkman.cusAddressProvince=a.value
    },
    cusChangeCity(a){
      this.customerLinkman.cusAddressCity=a.value
    },
    cusChangeArea(a){
      this.customerLinkman.cusAddressArea=a.value
    },
    sel:function (a) {
      if(a.area.value != "区"){
        this.address=a.province.value + a.city.value + a.area.value
        console.log(this.address)
        this.is=true
        this.vidter=false
        this.update()
      }
    },
    tiaoBusinessDetails(businessId){//跳转到商机详情页面
      this.$router.push({
        path:'/businessdetails',
        query:{
          businesId:businessId
        }
      })
    },
    tiaoContractDetails(contractId){//跳转到合同
      this.$router.push({
        path:'/contrantview',
        query:{
          key:contractId
        }
      })
    },
    tiaoOrderDetails(orderId){
      this.$router.push({
        path:'/demopage',
        query:{
          key:orderId
        }
      })
    },
    tiaoMaintainDetails(tainId){//跳转到维修单
      this.$router.push({
        path:'/order',
        query:{
          tainId:tainId
        }
      })
    },
  },
  watch:{
    $route(){
      if(this.$route.query.customId != null && this.$route.query.customId != ""){
        this.openFullScreen2();
        this.customId=this.$route.query.customId
        this.initCustomerLinkman(this.customId)
        this.initView(this.customId)
        this.initAddress(this.customId)
        this.initBusiness(this.customId)
        this.initLinkman(this.customId)
        this.initContract(this.customId)
        this.initOrderInfo(this.customId)
        this.initCtschems(this.customId)
        this.initCustomerCare(this.customId)
        this.initDelivery(this.customId)
        this.initMaintain(this.customId)
        this.address=this.customerLinkman.cusAddressProvince + this.customerLinkman.cusAddressCity + this.customerLinkman.cusAddressArea;
      }
      // 方便校验
      this.updateCusName=this.customerLinkman.cusName
      this.updateCupPhone=this.customerLinkman.culinkmenByCustomId[0].cupName
    }
  },
  filters: {// 日期格式化
    formatDate: function (time) {
      if (time != null && time != '') {
        var date = new Date(time)
        return formatTimeToStr(date, 'yyyy-MM-dd hh:mm:ss')
      } else {
        return ''
      }
    },
    amountEvent:function(val){
      return amountToStr(val);
    },
  },
}
</script>

<style scoped>
  .top{
    width: 100%;
    border:1px solid #ccc;
    background: white;
    margin-bottom: 10px;
  }

  .top2{
    width: 98%;
    border-top: 1px solid #ccc;
    font-size: 14px;
  }

  .top2 .el-row{
    margin-left: 100px;
  }

  .font{
    color: gray;
  }

  .lian{
    text-align: left;
    margin-left: 15px;
  }

  .lian p{
    margin-bottom: 10px;
  }

  .left{
    min-height:500px;
  }

  .left .el-row{
    margin-top: 10px;
  }

  .right{
    min-height:800px;
    background: white;
    border: 1px solid #ccc;
  }

  .tabs{
    width: 830px;
  }

  .tabs .el-row{
    color: gray;
  }

  .busi{
    margin-top:30px;
    margin-left: 60px;
  }

  .busi p{
    margin-top: 10px;
    margin-left: 50px;
  }

  .top2 .el-form-item{
    margin-bottom: 0px;
  }
</style>
<style>
  .distpicker select {
    width: 85px;
    height: 35px;
    font-size: 10px;
  }

  .top2 .el-input__inner{
    border: none;
    height: 30px;
    color: black;
    cursor: pointer;
  }

  .top2 .el-input__inner:focus-within{
    border: 1px solid gray;
    cursor: auto;
  }

  .kh .el-input__inner{
    border: none;
    color: black;
    font-size: 20px;
  }

  .read .el-input__inner:focus-within{
    border: none;
  }

  .el-tabs__nav-wrap::after { /*去掉横杠*/
    width: 20%;
    background-color: white;
  }

  .el-tabs__header {
    margin-left: 50px;
  }

  .distpicker-address select {
    width: 80px;
  }

</style>
